<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>素材库</title>
    <link rel="stylesheet" href="/static/res/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/admin/addons/builder/css/common.css" media="all">
    <style>
        html {
            height: 100%;
        }

        body {
            height: 100%;
        }

        .admin-mdl-file {
            font-size: 12px;
            overflow: auto;
            flex: 1;
            padding: 0 10px;
            height: 90%;
        }


        .admin-mdl-file .active {
            background-color: rgb(237, 239, 255);;
        }

        .admin-mdl-file img {
            width: 2.125rem;
        }

        .admin-mdl-file .more {
            width: 0.25rem;
        }

        .layui-row, .layui-row .menu-left, .layui-row .menu-right {
            height: 100%;
        }

        .layui-row .menu-left .menu-left-group {
            height: 100%;
            border-right: 1px solid #eee;
            /*border-bottom: 1px solid #eee;*/
            overflow: auto;
        }


        .layui-row .menu-left .menu-left-group .menu-left-add-group {
            display: flex;
            height: 10%;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            box-shadow: 0 0 5px 5px rgba(0,0,0,.03);
        }


        .layui-row .menu-right .menu-right-parent {
            width: 100%;
            height: 88%;
        }

        .layui-row .menu-right .menu-right-title {
            display: flex;
            align-items: center;
            margin: 10px 0 0 10px;
            padding-bottom: 10px;
            border-bottom: 1px #eee dashed;
            height: 39px;
            line-height: 39px;
        }

        .admin-mdl-search {
            display: flex;
            text-align: center;
            margin: 0 10px;
            height: 35px;
            line-height: 35px;
        }

        .admin-mdl-search input {
            width: 16.5rem;
            padding: 0 1rem;
            border: 1px solid #eee;
            border-radius: 0.25rem 0 0 0.25rem;
        }

        .admin-mdl-search .flex-center {
            background-color: #E7F0F2;
            width: 4.75rem;
            border-radius: 0 0.25rem 0.25rem 0;
            cursor: pointer;
        }

        .admin-mdl-search img {
            width: 40%;
            height: auto;
        }

        .menu-right-content {
            padding-top: 10px;
            padding-right: 20px;
            /*height: 70%;*/
        }

        .image-parent {
            padding: 10px;
            align-items: center;
            height: 130px;
            margin-bottom: 20px;
        }

        .image-parent-one {
            cursor: pointer;
            text-align: center;
            height: 100%;

        }

        .image-parent-one img {
            width: 100%;
            object-fit: contain;
            border: 2px solid #fff;
            height: 100%;
        }

        .image-parent-one .on {

            border: 2px solid #ff4949;
        }


        .image-parent-one .image-text {
            margin-top: 5px;
        }

        .image-parent-one .image-text p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
            font-size: 12px;
            color: #515a6e !important;
        }

        .nameStyle {
            position: absolute;
            white-space: nowrap;
            z-index: 9;
            background: #000;
            height: 20px;
            line-height: 20px;
            color: #fff;
            border: 1px solid #ebebeb;
            padding: 0 5px;
            right: 0;
            bottom: -10px;
        }

        .operation-btns {
            display: none;
            position: absolute;
            bottom: 0;
            right: 0;
            border-radius: 4px;
            width: 100%;
            /*margin: 10px;*/
            line-height: 25px;
            color: #fff;
            background-color: #0000004d;
            text-align: center;
        }

        .image-parent-one .number {
            height: 33px;
            position: absolute;
            right: 0;
            top: 0;
        }

        .ivu-modal-wrap * {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        .demo-badge {
            width: 42px;
            height: 42px;
            background: transparent;
            border-radius: 6px;
            display: inline-block;
        }

        .ivu-badge-count {
            line-height: 1;
            vertical-align: middle;
            position: absolute;
            -webkit-transform: translateX(50%);
            transform: translateX(50%);
            top: -10px;
            right: 0;
            height: 20px;
            border-radius: 10px;
            min-width: 8px;
            background: #ed4014;
            border: 1px solid transparent;
            color: #fff;
            line-height: 18px;
            text-align: center;
            padding: 0 6px;
            font-size: 12px;
            white-space: nowrap;
            -webkit-transform-origin: -10% center;
            transform-origin: -10% center;
            z-index: 10;
            -webkit-box-shadow: 0 0 0 1px #fff;
            box-shadow: 0 0 0 1px #fff;
        }

        .grey {
            background-color: grey !important;
        }


        .admin-mdl-file li {
            border: 1px solid #eee;
            display: flex;
            height: 45px;
            align-items: center;
            justify-content: center;
            margin: 1.25rem 0;
            /*padding: 0 1.2rem;*/
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }


        .admin-mdl-file p {
            flex: 1;
            margin-left: 8px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
        }

        .group-left {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90%;
        }

        .admin-mdl-file .group-img {
            width: 20%;
            padding-left: 10px;
        }

        .group-right {
            width: 10%;
            display: flex;
            justify-content: right;
            padding-right: 5px;
            height: 100%;
            align-items: center;
            /*position: relative;*/
        }

        .group-right .child {
            position: absolute;
            right: 0px;
            line-height: 36px;
            box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px;
            background-color: rgb(255, 255, 255);
            z-index: 100;
            white-space: nowrap;
            box-sizing: border-box;
            padding: 5px 0px;
            border-width: 1px;
            border-style: solid;
            border-color: rgb(238, 238, 238);
            border-image: initial;
            border-radius: 2px;
            display: none;
        }

        .group-right .child > dd {
            padding: 0 10px;
            text-align: center;
        }

        .del-group {
            color: red;
        }

        .uploadsDiv {
            position: relative;
            margin: 0 10px;
        }

        .uploadsDiv .hb-uploads {
            background: linear-gradient(97.03deg, #a87fff 9.88%, #b384ff 9.89%);
        }

        .uploads-dl {
            display: none;
            min-width: auto;
            position: absolute;
            top: 40px;
            left: -20px;
            text-align: center;
            padding: 10px;
            border-radius: 10px;
        }

        .layui-layer-tips .layui-layer-content {
            background: #a87fff !important;
        }

        .layui-layer-tips i.layui-layer-TipsL, .layui-layer-tips i.layui-layer-TipsR {

            border-bottom-color: #a87fff !important;
        }

        .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: #1E9FFF !important;
        }

        .image-parent .left {
            width: 100%;
            display: flex;
            align-items: center;
            /*margin: 2px;*/
            flex-direction: column;
            padding: 10px;
            cursor: pointer;
            border-radius: 5px;
            box-shadow: 0 2px 12px 0 #B7EEB7FF;
        }

        .image-parent .left .left-img {
            width: 50px
        }

        .image-parent .left .left-img img {
            width: 50px;
            height: 100%;
            margin-top: -5px
        }

        .image-parent .left .center {
            width: 95%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: 12px;
            text-decoration: underline;
            color: #0A58A6;
            cursor: pointer;
            height: 20px;
            line-height: 20px;
            text-align: center;
            transform: inherit;
        }
        ::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }

        ::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 5px;
            background-color: #e9e8e8;
        }

        ::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            background: #fffefe;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<input type="hidden" id="selectedUrl" value=""/>
<div class="layui-row">
    <div class="layui-col-xs2 menu-left">
        <div class="menu-left-group">
            <ul class="admin-mdl-file ">
                {foreach name="cate" item="vo" key='key'}
                <li class="{if $key == 0}active groupActive{/if} contextmenu" data-id="{$vo.id}"
                    data-title="{$vo.title}">
                    <div class="group-left switchGroup">
                        <div class="group-img">
                            <img src="https://static.resource.zhiju002.com/img/group.png" alt="" class="folder">
                        </div>
                        <p title="{$vo.title}">{$vo.title}</p>
                    </div>
                    <div class="group-right" data-id="{$vo.id}" data-name="{$vo.title}">
                        <i class="layui-icon layui-icon-more-vertical group-menu"></i>
                    </div>
                </li>
                {/foreach}
            </ul>
            <div class="menu-left-add-group" {if $editor== 1}style="display: none" {/if}>
            <div class="btn flex-center">
                <button type="button" class="layui-btn layui-btn-primary addGroup">添加分组</button>
            </div>
        </div>
    </div>
</div>
<div class="layui-col-xs10 menu-right">
    <div class="menu-right-parent">
        <div class="menu-right-title">
            <button type="button" class="layui-btn layui-btn-sm use grey useAll">
                使用选中{$title}
            </button>
            {if count($cate) > 0}
            <div class="uploadsDiv">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm hb-uploads">
                    上传{$title}
                </button>
                <dl class="layui-nav-child uploads-dl layui-anim layui-anim-downbit">
                    <dd>
                        <button type="button" class="layui-btn layui-btn-green layui-btn-sm uploadsBtn">
                            上传至服务器
                        </button>
                    </dd>
                    {if $qiNiu.open}
                    <dd>
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm uploadsQiNiu"
                                style="background-color: #07beff!important;">
                            上传至七牛云
                        </button>
                    </dd>
                    {/if}
                </dl>
            </div>
            {/if}
            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger del  grey">
                删除{$title}
            </button>
            <div class="admin-mdl-search">
                <input type="text" placeholder="请输入名称" id="keyword">
                <p class="flex-center search">
                    <img src="/static/admin/images/material/icon37.png" alt="">
                </p>
            </div>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger2 clear grey">
                清空选择(<span class="count">0</span>/{$param.c})
            </button>
        </div>
        <div class="menu-right-content tpl_list">

        </div>
    </div>
    <div class="page" id="page" style="text-align: right;margin-right: 30px"></div>
</div>
</div>

<script id="template1" type="text/html">
    {{# for(var i=0;i < d.data.length ;i++){ }}
    <div class="layui-col-xs2 image-parent">
        <div class="image-parent-one" data-url="{{d.data[i].url}}" data-id="{{d.data[i].id}}">
            <p class="number" style="display: none">
                <span class="ivu-badge">
                    <a href="#" class="demo-badge"></a>
                    <sup class="ivu-badge-count ivu-badge-count-error"
                         style="margin-top: 11px; margin-right: 12px;">1</sup>
                </span>
            </p>
            <img class="now-img" src="{{d.data[i].url}}"/>
            <div class="image-text">
                {{# if(d.data[i].type == 2){ }}
                <p style="color: #07beff !important;">{{d.data[i].title}}</p>
                {{# }else { }}
                <p>{{d.data[i].title}}</p>
                {{# } }}
            </div>
            <div class="nameStyle" style="display: none;">
                {{d.data[i].title}}
            </div>
        </div>
        <div class="operation-btns text-xs text-center" style="display: none;  cursor: pointer;">
            <span class="openMaterialPreview" data-url="{{d.data[i].url}}">查看{{# if(d.data[i].type == 2){ }} - 七牛云 {{# }else { }} - 本地{{# } }}</span>
        </div>
    </div>
    {{# } }}
</script>
<script id="template2" type="text/html">
    {{# for(var i=0;i < d.data.length ;i++){ }}
    <div class="layui-col-xs3 image-parent">
        <div class="image-parent-one" data-url="{{d.data[i].url}}" data-id="{{d.data[i].id}}">
            <p class="number" style="display: none">
                <span class="ivu-badge">
                    <a href="#" class="demo-badge"></a>
                    <sup class="ivu-badge-count ivu-badge-count-error"
                         style="margin-top: 11px; margin-right: 12px;">1</sup>
                </span>
            </p>
            <video src="{{d.data[i].url}}" controls="controls" class="now-img" style="width: 100%;height: 130px;">
                您的浏览器不支持 video 标签。
            </video>
            <div class="image-text">
                {{# if(d.data[i].type == 2){ }}
                <p style="color: #07beff !important;">{{d.data[i].title}}</p>
                {{# }else { }}
                <p>{{d.data[i].title}}</p>
                {{# } }}
            </div>
            <div class="nameStyle" style="display: none;">
                {{d.data[i].title}}
            </div>
        </div>
        <!--        <div class="operation-btns text-xs text-center" style="cursor: pointer;display: block;bottom: -10px;">-->
        <!--            <span class="openMaterialPreview" data-url="{{d.data[i].url}}">查看{{# if(d.data[i].type == 2){ }} - 七牛云 {{# }else { }} - 本地{{# } }}</span>-->
        <!--        </div>-->
    </div>
    {{# } }}
</script>
<script id="template3" type="text/html">
    {{# for(var i=0;i < d.data.length ;i++){ }}
    <div class="layui-col-xs3 image-parent">
        <div class="image-parent-one" data-url="{{d.data[i].url}}" data-id="{{d.data[i].id}}">
            <p class="number" style="display: none">
                <span class="ivu-badge">
                    <a href="#" class="demo-badge"></a>
                    <sup class="ivu-badge-count ivu-badge-count-error"
                         style="margin-top: 11px; margin-right: 12px;">1</sup>
                </span>
            </p>
            <audio src="{{d.data[i].url}}" controls loop muted style="width: 100%" class="now-img">
                您的浏览器不支持 audio 标签。
            </audio>

            <div class="image-text">
                {{# if(d.data[i].type == 2){ }}
                <p style="color: #07beff !important;">{{d.data[i].title}}</p>
                {{# }else { }}
                <p>{{d.data[i].title}}</p>
                {{# } }}
            </div>
            <div class="nameStyle" style="display: none;">
                {{d.data[i].title}}
            </div>
        </div>

    </div>
    {{# } }}
</script>
<script id="template4" type="text/html">
    {{# for(var i=0;i < d.data.length ;i++){ }}
    <div class="layui-col-xs2 image-parent">
        <div class="image-parent-one" data-url="{{d.data[i].url}}" data-id="{{d.data[i].id}}">
            <p class="number" style="display: none">
                <span class="ivu-badge">
                    <a href="#" class="demo-badge"></a>
                    <sup class="ivu-badge-count ivu-badge-count-error"
                         style="margin-top: 11px; margin-right: 12px;">1</sup>
                </span>
            </p>


            <div class="left layui-col-xs4 now-img">
                <div class="left-img " title="{{d.data[i].url}}">
                    <img src="/index2/format/{{d.data[i].url.split('.')[1]}}.png">
                </div>


                <div class="image-text" style="width: 95%">
                    {{# if(d.data[i].type == 2){ }}
                    <p style="color: #07beff !important;">{{d.data[i].title}}</p>
                    {{# }else { }}
                    <p>{{d.data[i].title}}</p>
                    {{# } }}
                </div>
                <!--                <span class="center" title="{{d.data[i].url}}">-->
                <!--                    {{d.data[i].url}}-->
                <!--                </span>-->
                <!--                <div class="image-text">-->
                <!--                    <p style="color: #515a6e;font-size: 11px">上传时间：{{d.data[i].create_time}}</p>-->
                <!--                </div>-->
            </div>

        </div>

    </div>
    {{# } }}
</script>

<div class="progress" style="display: none;">
    <div style="width: 200px;height: 50px;">
        <div style="margin-bottom: 10px;">
            <div><i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop"></i>上传中....
            </div>
        </div>
        <div class="layui-progress" lay-filter="progress">
            <div class="layui-progress-bar" lay-percent="0%"></div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/res/layui/layui.js"></script>
<script>
    layui.use(['laypage', 'upload', 'laytpl', 'element'], function () {
        var laypage = layui.laypage
            , upload = layui.upload
            , laytpl = layui.laytpl
            , element = layui.element
            , ga = $('.groupActive').attr('data-id'), allow = parseInt('{$param.c}'), v = '{$param.v}'
            , selectedUrl = v ? v.split(',') : []
            , selectedId = [], editor = '{$editor}', template = 'template{$type}'
            , dropdown = layui.dropdown;

        dropdown.render({
            elem: '.group-right',
            align: 'center',
            data: [{
                title: '修改分组名称',
                event: 'edit'
            }, {
                title: '删除分组',
                event: 'del'
            }],
            click: function (obj) {
                var id = $(this.elem).attr('data-id'),name = $(this.elem).attr('data-name');
                if (obj.event === 'edit') {
                    layer.prompt({
                        title: '当前名称《' + name + '》，请填写新名称',
                        formType: 3
                    }, function (pass, index) {
                        layer.close(index);
                        common.request(api.saveGroup, {title: pass, id: id});
                    });
                }else{
                    layer.confirm('删除《' + name + '》分组后，分组内的文件也将同步删除<br/>如文件已被使用，请谨慎操作！', {title: "请确认"}, function (index) {
                        layer.close(index);
                        common.request(api.destroyGroup, {id: id}, 'POST', 2);
                    });
                }
            }
        });

        if (editor) {
            var a = window.parent.$(".layui-layer-iframe iframe"), h = window.parent.$(".layui-layer-iframe"),
                b = a.length, c = $(a[b - 1]), d = $(h[b - 1]).find('.layui-layer-btn'), e = c.height();
            d.hide();
            c.css('height', (e + 57) + 'px');
        }
        const api = {
            index: '{:url("gallery/index")}',
            destroy: '{:url("gallery/destroy")}',
            destroyGroup: '{:url("gallery/destroyGroup")}',
            saveGroup: '{:url("gallery/saveGroup")}',
            addGroup: '{:url("gallery/addGroup")}',
            uploads: '{:url("gallery/upload")}',
            getQnToken: '{:url("gallery/getQnToken")}',
            addImage: '{:url("gallery/addImage")}'
        }

        const common = {
            request: function (url, data, type, reload = 1) {
                common.load();
                var btn = $(this);
                btn.attr('disabled', true);
                $.ajax({
                    type: type ? type : 'POST',
                    url: url,
                    data: data,
                    dataType: "json",
                    success: function (data) {
                        layer.closeAll();
                        btn.removeAttr('disabled');
                        common.reload(data, reload);
                    },
                    error(e) {
                        layer.closeAll();
                        btn.removeAttr('disabled');
                    }
                });
                return false;
            },

            reload: function (data, type) {
                if (type === 1) {
                    layer.msg(data.msg);
                    common.getData(ga, 1, 18, template, 'tpl_list', $("#keyword").val());
                } else {
                    if (data.code == 1) {
                        window.location.reload();
                    } else {
                        layer.msg(data.msg);
                    }
                }
            },

            load: function (text = '加载中....') {
                layer.msg('<div><i class="layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop"></i> ' + text + '', {
                    shade: 0.4,
                    time: 0
                });
            },
            loadUpload: function () {
                layer.msg('' + $('.progress').html() + '', {
                    shade: 0.4,
                    time: 0
                });
            },
            childHide: function () {
                $(".child").css('top', 0).hide()
            },
            render: function () {
                $('.image-parent').each(function () {
                    var i = $(this).children('.image-parent-one'), t = i.children('.now-img'), h = 'on',
                        c = i.children(".number");
                    if (selectedUrl.indexOf(i.attr('data-url')) !== -1) {
                        t.addClass(h);
                        c.find('.ivu-badge-count').text(selectedUrl.length);
                        c.addClass('number-on').show();
                    } else {
                        t.removeClass(h);
                        c.removeClass('number-on').hide();
                    }
                });
                var key = 1;
                $(".number-on").each(function () {
                    $(this).find('.ivu-badge-count').text(key);
                    key++;
                });
                if (selectedUrl.length > 0) {
                    $(".del").addClass('delAll').removeClass('grey');
                    $(".clear").addClass('clearAll').removeClass('grey');
                    $(".use").addClass('userAll').removeClass('grey');
                    $(".count").text(selectedUrl.length);
                }
            },
            clearAll: function () {
                selectedUrl = [];
                selectedId = [];
                $('.ivu-badge-count').text(0);
                $(".number-on").removeClass('number-on').hide();
                $(".now-img").removeClass('on');
                $(".count").text(0);
                $(".use").addClass('grey').removeClass('userAll');
                $(".del").addClass('grey').removeClass('delAll');
                $(".clear").addClass('grey').removeClass('clearAll');
            },
            getData: function (cate, page, limit, now_tpl, par, keyword) {
                $("." + par).empty();
                common.load()
                var v = $('.groupActive').attr('data-id');
                v = typeof (v) !== 'undefined' ? v : '';
                $.ajax({
                    type: 'GET',
                    url: api.index,
                    data: {cate: v, page: page, limit: limit, keyword: keyword},
                    dataType: "json",
                    success: function (data) {
                        if (data.code == 0) {
                            if (data.data.length <= 0) {
                                $("." + par).html('<li style="text-align: center;margin-top: 10%">暂无更多</li>');
                            } else {
                                var tpl = document.getElementById(now_tpl).innerHTML;
                                laytpl(tpl).render({data: data.data}, function (html) {
                                    $("." + par).html(html);
                                });
                                common.render();
                            }
                            count = data.count
                            if (page == 1) {
                                laypage.render({
                                    elem: 'page'
                                    , count: count
                                    , limit: 18
                                    , layout: ['count', 'prev', 'page', 'next', 'refresh', 'skip']
                                    , jump: function (obj, first) {
                                        if (!first) {
                                            common.getData(ga, obj.curr, obj.limit, template, 'tpl_list')
                                        }
                                    }
                                });
                            }
                            layer.closeAll();

                            if (typeof (ga) == 'undefined') {
                                layer.tips('首次使用请先创建分组', '.addGroup');
                            }

                        } else {
                            layer.msg(data.msg);
                        }
                    },
                    error(e) {
                        layer.closeAll();
                    }
                });
            },
        }

        common.getData(ga, 1, 18, template, 'tpl_list');


        upload.render({
            elem: '.uploadsBtn',
            url: api.uploads,
            multiple: true,
            accept: '{if $type == 1}images{elseif $type == 2}video{else}file{/if}',
            data: {
                cate: function () {
                    return $('.groupActive').attr('data-id');
                },
                type: '{$type}'
            },
            before: function (obj) {
                var i = this.elem.index('.uploadsBtn');
                element.progress('progress', '0%')
                common.loadUpload();
            }
            , progress: function (n, elem, res, index) {
                element.progress('progress', n + '%');
            },

            done: function (data) {
                layer.closeAll();
                if (data.code == 1) {
                    common.getData(ga, 1, 18, template, 'tpl_list')
                } else {
                    layer.msg(data.msg);
                }
            },
            error: function () {
                layer.closeAll();
                layer.msg('上传失败');
            }
        });

        var fileName = '';
        upload.render({
            elem: '.uploadsQiNiu'
            , url: '{$qiNiu.url}'
            , auto: false
            , data: {
                token: '{$qiNiu.token}',
                key: function () {
                    return 'project/gallery/' + fileName;
                }
            }
            , choose: function (obj) {
                element.progress('progress', '0%')
                obj.preview(function (index, file, result) {
                    fileName = Date.now() + "$$" + file.name;
                    obj.upload(index, file)
                });
                common.loadUpload();
            }
            , done: function (data, index, upload) {
                common.request(api.addImage, {
                    title: fileName,
                    key: data.key,
                    cate: $('.groupActive').attr('data-id')
                }, 'POST');
            }
            , accept: 'file'
            , size: 0
            , progress: function (n, elem, res, index) {
                element.progress('progress', n + '%');
            }

        });

        $(".group-right").click(function () {
            var t = $(this), a = t.children('.child'), b = a.css('display'), h = $(".child");
            h.css('top', 0).hide();
            b === "none" ? a.css('top', (t.offset().top - 4) + 'px').show() : a.css('top', 0).hide();
        })

        $(".uploadsDiv").mouseover(function () {
            $(".uploads-dl").show();
        }).mouseout(function () {
            $(".uploads-dl").hide();
        });

        $('.tpl_list').on('mouseover', '.image-parent', function () {
            $(this).find('.operation-btns').show()
        }).on('mouseout', '.image-parent', function () {
            $(this).find('.operation-btns').hide()
        }).on('click', '.openMaterialPreview', function () {
            var value = $(this).attr("data-url").split(',');
            var data = [];
            for (i in value) {
                data.push({src: value[i]});
            }
            layer.photos({
                photos: {"data": data, "start": 0}
                , anim: 5
                , closeBtn: 1
            });
        }).on('click', '.image-parent-one', function () {
            common.childHide();
            var u = $(this).attr("data-url"), t = $(this).children('.now-img'), h = 'on',
                c = $(this).children(".number"), count = $(".count"), use = $(".use"), del = $(".del"),
                id = $(this).attr("data-id");
            if (t.hasClass(h)) {
                t.removeClass(h);
                selectedUrl.splice(selectedUrl.indexOf(u), 1);
                selectedId.splice(selectedId.indexOf(id), 1);
                c.removeClass('number-on').hide();
                var i = 1;
                $(".number-on").each(function () {
                    $(this).find('.ivu-badge-count').text(i);
                    i++;
                });
            } else {
                if (selectedUrl.length >= allow) {
                    layer.msg('只能选择' + allow + '张{$title}');
                    return false;
                }
                selectedUrl.push(u);
                selectedId.push(id);
                t.addClass(h);
                c.find('.ivu-badge-count').text(selectedUrl.length);
                c.addClass('number-on').show();
            }
            var length = selectedUrl.length;
            if (length <= 0) {
                count.parent('.clear').addClass('grey').removeClass('clearAll');
                use.addClass('grey').removeClass('userAll');
                del.addClass('grey').removeClass('delAll');
            } else {
                count.parent('.clear').removeClass('grey').addClass('clearAll');
                use.removeClass('grey').addClass('userAll');
                del.removeClass('grey').addClass('delAll');
            }
            count.text(selectedUrl.length);
            $("#selectedUrl").val(selectedUrl.join(','));
        })

        $(".switchGroup").click(function () {
            $(this).parent().addClass('active groupActive').siblings().removeClass('active groupActive');
            common.getData($(this).parent().attr('data-id'), 1, 18, template, 'tpl_list', $("#keyword").val())
            common.childHide();
        });

        $(".addGroup").click(function () {
            common.childHide();
            layer.prompt({title: '请填写分组名称', formType: 3}, function (pass, index) {
                layer.close(index);
                common.request(api.addGroup, {title: pass, type: '{$type}'}, 'POST', 2);
            });
        });

        $(".search").click(function () {
            common.getData(ga, 1, 18, template, 'tpl_list', $("#keyword").val())
        });

        $(".useAll").click(function () {

            if (editor) {
                window.parent.$(".layui-layer-iframe .layui-layer-btn .layui-layer-btn0").click()
            } else {
                const p = parent.length <= 1 ? parent : parent[0], s = '{$spec}';
                if (!s) {
                    // console.log(p.$('body').html())
                    p.renderGallery(selectedId, selectedUrl, '{$param.n}', '{$type}');
                } else {
                    p.renderGallerySpec(selectedId, selectedUrl, '{$param.n}', '{$type}');
                }

            }
        });
    });
</script>
</html>